<template>
  <div class="container">
    <div>
      基本属性
    </div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>班级名称：
        </div>
        <div>
          <el-input
              disabled
              v-model="info.className"
              placeholder="请输入学员姓名"
              clearable
              size="small"
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>班级类型：
        </div>
        <div>
          <el-select v-model="info.classType" placeholder="请选择班级类型" disabled>
            <el-option
              v-for="item in classList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>开班时间：
        </div>
        <div>
          <el-input
              v-model="info.classStartTime"
              placeholder="请输入开班时间"
              clearable
              size="small"
              disabled
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          毕业时间：
        </div>
        <div>
          <el-input
              v-model="info.classEndTime"
              placeholder="请输入毕业时间"
              clearable
              size="small"
              disabled
            />
        </div>
      </div>
    </div>
    <!-- <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>报名人数：
        </div>
        <div>
          <el-input
              v-model="info.signUpNum"
              placeholder="请输入报名人数"
              clearable
              size="small"
              disabled
            />
        </div>
      </div>
    </div> -->
    <div class="row">
      <div class="font">
        责任教员：
      </div>
      <div>
        <el-input
            v-model="info.teacher"
            placeholder="请输入责任教员"
            clearable
            disabled
          />
      </div>
    </div>
    <div class="row">
      <div class="font">
        课程名称：
      </div>
      <div>
        <el-input
            style="width:950px"
            v-model="info.courseNames"
            placeholder="请输入课程名称"
            clearable
            disabled
          />
      </div>
    </div>
    <div>
      学员属性
    </div>
    <div class="line"></div>
    <div class="row">
      <el-table
        class="listTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <!-- <el-table-column label="序号" prop="id" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.deptId }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="学员姓名">
          <template slot-scope="{row}">
            <span>{{ row.studentName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.phonenumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户性别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sex | sexMode}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报考级别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.testLevel | levelMode}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报考方向" align="center">
          <template slot-scope="{row}">
            <span>{{ row.testDirection | directionMode}}</span>
          </template>
        </el-table-column>
        <el-table-column label="答题数" align="center">
          <template slot-scope="{row}">
            <span>{{ row.answerNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="看视频数" align="center">
          <template slot-scope="{row}">
            <span>{{ row.videoNum }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="理论时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.theoreticalTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实操时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.operationTime }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="视频播放总时长（分钟）" align="center">
          <template slot-scope="{row}">
            <span>{{ row.videoPlayTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footers">
      <el-pagination
        :total="total"
        layout="total, sizes, prev, pager, next"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        :current-page.sync="curPage"
        @current-change="getList($event)"
        class="sortStyle"
      />
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getStudentList, classDetail } from "@/api/system/user";
export default {
  components: {
   
  },
  filters: {
    sexMode: function(value) {
      switch (value) {
        case '0':
          return '男'
        case '1':
          return '女'
        case '2':
          return '未知'
      }
    },
    levelMode: function(value) {
      switch (value) {
        case '1':
          return '初级'
        case '2':
          return '中级'
        case '3':
          return '高级'
        case '4':
          return '技师（暂未开放）'
      }
    },
    directionMode: function(value) {
      switch (value) {
        case '1':
          return '监控方向'
        case '2':
          return '维保方向'
      }
    },
  },
  data() {
    return {
      info: '',
      classList: [
        {key: '1', value: '初级'},
        {key: '2', value: '中级'},
        {key: '3', value: '高级'}
      ],
      list: [],
      limit: 10,
      total: 0,
      curPage: 1,
      listLoading: false,
    }
  },
  created() {
  },
  mounted(){
    this.init(this.$route.query.id)
    this.getList(1, this.$route.query.id)
  },
  methods: {
    init(id) {
      classDetail(id).then(res => {
        if (res.code == 200) {
          this.info = res.data
          if (this.info.classType == '1') {
            this.info.classType = '初级'
          } else if (this.info.classType == '2') {
            this.info.classType = '中级'
          } else {
            this.info.classType = '高级'
          }
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleSizeChange() {

    },
    getList(page, id) {
      let params = {
        pageNum: page,
        pageSize: this.limit,
        classId: id,
      }
      this.listLoading = true;
      getStudentList(params).then(res => {
        this.listLoading = false
        if (res.code == 200) {
          this.list = res.rows
          this.total = res.total
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    back() {
      this.$router.push('classList')
    },
  }
}
</script>
<style scoped>
  .container {
    padding-left: 26px;
    padding-right: 24px;
    padding-top: 24px;
  }
  .row {
    display:flex;
    padding-bottom: 20px;
  }
  .line {
    height: 1px;
    background: #DCDFE6;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 20px;
  }
  .row .font {
    width: 200px;
    text-align: right;
    margin-right: 20px;
  }
  .row .fonts {
    width: 300px;
    text-align: right;
    margin-right: 20px;
  }
  .flex_row {
    display: flex;
  }
  .footer {
    width: 540px;
    text-align: right;
    margin-top: 40px
  }
  .footers {
    position: absolute;
    right: 26px;
  }
</style>
